<template>
  <div class="container">
    <div id="app"></div>
    <canvas id="deck-canvas"></canvas>
  </div>
</template>

<script>
import mapboxgl from 'mapbox-gl';
import 'mapbox-gl/dist/mapbox-gl.css';
import { GeoJsonLayer, ArcLayer } from '@deck.gl/layers';
import { MapboxLayer } from '@deck.gl/mapbox';

/**
 * 创建 mapbox 底图，并使用 deck.gl 绘制图层后添加到 mapbox 当中，使用这种方式绘制的图层视觉效果会比后面跟一个 canvas 效果好
 */

export default {
  data() {
    return {
      // 历史数据
      historyData: null,
      // map 地图对象实例
      map: null,
    };
  },
  mounted() {
    this._createBaseMap();
  },
  methods: {
    _createBaseMap() {
      mapboxgl.accessToken =
        'pk.eyJ1IjoiaW54bG54IiwiYSI6ImNsMzRmZDE4dTBhOWczaWs3a2psanphMnUifQ.iKIlYhNlW_13OqBJLOc9sw';

      const map = new mapboxgl.Map({
        container: 'app',
        //自己绘制的样式地图令牌
        antialias: true, //抗锯齿
        style: 'mapbox://styles/mapbox/dark-v10',
        center: [113.97923191113188, 22.589860256941634],
        zoom: 7,
      });

      this.map = map;
      window.map = map;

      // zoom变化时打印zoom值
      map.on('zoom', function (e) {
        console.log('zoom :>> ', e.target.getZoom());
      });

      const geojsonLayer = new MapboxLayer({
        id: 'airports',
        data: '../ne_10m_airports.geojson',
        filled: true,
        type: GeoJsonLayer,
        pointRadiusMinPixels: 2,
        pointRadiusScale: 2000,
        getPointRadius: (f) => 11 - f.properties.scalerank,
        getFillColor: [200, 0, 80, 180],
        // Interactive props
        pickable: true,
        autoHighlight: true,
        onClick: (info) =>
          // eslint-disable-next-line
          info.object &&
          alert(
            `${info.object.properties.name} (${info.object.properties.abbrev})`
          ),
      });

      const arcLayer = new MapboxLayer({
        id: 'arcs',
        data: '../ne_10m_airports.geojson',
        type: ArcLayer,
        dataTransform: (d) =>
          d.features.filter((f) => f.properties.scalerank < 4),
        // Styles
        getSourcePosition: () => [-0.4531566, 51.4709959], // London
        getTargetPosition: (f) => f.geometry.coordinates,
        getSourceColor: [0, 128, 200],
        getTargetColor: [200, 0, 80],
        getWidth: 1,
      });

      // console.log('deck :>> ', deck);

      map.on('load', function () {
        map.addLayer(geojsonLayer);
        map.addLayer(arcLayer);
      });
    },
  },
};
</script>

<style>
body {
  padding: 0;
  margin: 0;
  overflow: hidden;
}
#app {
  position: absolute;
  width: 100%;
  top: 0;
  bottom: 0;
}

/* 将底部的logo和信息声明隐藏 */
.mapboxgl-ctrl-logo {
  display: none !important;
}
.mapboxgl-ctrl-bottom-right {
  display: none !important;
}

/* 弹出层样式 */
.mapboxgl-popup {
  padding-bottom: 5px;
}
/* 控制关闭按钮 */
.mapboxgl-popup-close-button {
  /* display: none; */
}
</style>
